<template>
  <div>
    <el-form :model="cusForm" ref="cusForm" label-width="120px" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="第一套房产信息"> </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="cusForm.pct" disabled placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="小区/房屋地址" prop="houseAddress">
            <el-input
              v-model="cusForm.encyptAddress"
              disabled
              placeholder=""
            ></el-input>
            <el-tooltip
              placement="bottom"
              :content="cusForm.unEncyptAddress"
              effect="light"
            >
              <i class="el-icon-view"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房屋面积（m²）" prop="houseArea">
            <el-input
              v-model="cusForm.houseArea"
              disabled
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宗地面积（m²）" prop="parcelArea">
            <el-input
              v-model="cusForm.parcelArea"
              disabled
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <template
          v-if="
            !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
              caseStatus
            )
          "
        >
          <el-col :span="6">
            <el-form-item label="房产类型" prop="houseAssetType">
              <el-input
                v-model="cusForm.houseAssetType"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房屋所属权" prop="houseAssetOwner">
              <el-input
                v-model="cusForm.houseAssetOwner"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="房屋所在楼层" prop="houseFloor">
              <el-input
                v-model="cusForm.houseFloor"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总楼层" prop="totalFloor">
              <el-input
                v-model="cusForm.totalFloor"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否为顶楼" prop="isHighestFloor">
            <el-input
              v-model="cusForm.isHighestFloor"
              disabled
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
        <template
          v-if="
            !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
              caseStatus
            )
          "
        >
          <el-col :span="6">
            <el-form-item label="房屋朝向" prop="houseOrientation">
              <el-input
                v-model="cusForm.houseOrientation"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房屋结构" prop="houseConstruction">
              <el-input
                v-model="cusForm.houseConstruction"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房屋建成年份" prop="houseBuildYear">
              <el-input
                v-model="cusForm.houseBuildYear"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
      <el-row>
        <template
          v-if="
            !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
              caseStatus
            )
          "
        >
          <el-col :span="6">
            <el-form-item label="不动产权证号" prop="assetCertNo">
              <el-input
                v-model="cusForm.assetCertNo"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="不动产单元号" prop="assetUnitNo">
              <el-input
                v-model="cusForm.assetUnitNo"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="不利因素" prop="negativeFactor">
              <el-input
                v-model="cusForm.negativeFactor"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房产估值" prop="houseAssetValue">
              <el-input
                v-model="cusForm.houseAssetValue"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
      <template v-if="isShowcusForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="第二套房产信息"> </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="所在城市" prop="city">
              <el-input
                v-model="cusForm2.pct"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小区/房屋地址" prop="houseAddress">
              <el-input
                v-model="cusForm2.encyptAddress"
                disabled
                placeholder=""
              ></el-input>
              <el-tooltip
                placement="bottom"
                :content="cusForm2.unEncyptAddress"
                effect="light"
              >
                <i class="el-icon-view"></i>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房屋面积（m²）" prop="houseArea">
              <el-input
                v-model="cusForm2.houseArea"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宗地面积（m²）" prop="parcelArea">
              <el-input
                v-model="cusForm2.parcelArea"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <template
            v-if="
              !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
                caseStatus
              )
            "
          >
            <el-col :span="6">
              <el-form-item label="房产类型" prop="houseAssetType">
                <el-input
                  v-model="cusForm2.houseAssetType"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房屋所属权" prop="houseAssetOwner">
                <el-input
                  v-model="cusForm2.houseAssetOwner"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="房屋所在楼层" prop="houseFloor">
                <el-input
                  v-model="cusForm2.houseFloor"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总楼层" prop="totalFloor">
                <el-input
                  v-model="cusForm2.totalFloor"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否为顶楼" prop="isHighestFloor">
              <el-input
                v-model="cusForm2.isHighestFloor"
                disabled
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <template
            v-if="
              !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
                caseStatus
              )
            "
          >
            <el-col :span="6">
              <el-form-item label="房屋朝向" prop="houseOrientation">
                <el-input
                  v-model="cusForm2.houseOrientation"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房屋结构" prop="houseConstruction">
                <el-input
                  v-model="cusForm2.houseConstruction"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房屋建成年份" prop="houseBuildYear">
                <el-input
                  v-model="cusForm2.houseBuildYear"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row>
          <template
            v-if="
              !['APPLY_SUBMIT', 'FIRST_FILTER', 'WAIT_AMEND'].includes(
                caseStatus
              )
            "
          >
            <el-col :span="6">
              <el-form-item label="不动产权证号" prop="assetCertNo">
                <el-input
                  v-model="cusForm2.assetCertNo"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="不动产单元号" prop="assetUnitNo">
                <el-input
                  v-model="cusForm2.assetUnitNo"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="不利因素" prop="negativeFactor">
                <el-input
                  v-model="cusForm2.negativeFactor"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房产估值" prop="houseAssetValue">
                <el-input
                  v-model="cusForm2.houseAssetValue"
                  disabled
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </template>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { CONTACT_FORM, CONTACT_TOW_FORM, ORGAN_FORM } from "../js/contant.js";
import { encryptStr } from '../../../utils/util.js'
export default {
  props: {
    caseStatus: {
      type: String,
      default: ""
    },
    assForm: {
      type: Object,
      default: {}
    }
  },
  watch: {
    assForm(newVal) {
      console.log('监听： ', newVal);
      if (newVal) {
        this.queryByCaseId(newVal);
      }
    }
  },
  data() {
    return {
      CONTACT_FORM,
      CONTACT_TOW_FORM,
      ORGAN_FORM,
      cusForm: {},
      cusForm2: {},
      organForm: {},
      contactForm1: {},
      contactForm2: {},
      isShowcusForm: false
    };
  },
  mounted() {},
  methods: {
    queryByCaseId(result) {
      result.houseAssetList.forEach(item => {
        item.houseAssetType = this.dicts["house_type"].childMap[
          item.houseAssetType
        ];
        item.isHighestFloor = this.dicts["is_highest_floor"].childMap[
          item.isHighestFloor
        ];
        item.houseAssetOwner = this.dicts["jyd_house_asset_owner"].childMap[
          item.houseAssetOwner
        ];
        item.houseConstruction = this.dicts["house_build"].childMap[
          item.houseConstruction
        ];
        item.houseOrientation = this.dicts["house_direction"].childMap[
          item.houseOrientation
        ];
        if (item.negativeFactor) {
          let arr = item.negativeFactor.split('#')
          let arry = [];
          if (arr && arr.length > 0) {
            arr.forEach(item => {
              let str = this.dicts["jyd_negative_factor"].childMap[item];
              arry.push(str);
            });
          }
          item.negativeFactor = arry.join(',');
        }
      });
      this.cusForm = result.houseAssetList[0] || {};
      this.$set(this.cusForm, 'pct', result.houseAssetList[0].city+result.houseAssetList[0].town)
      this.$set(this.cusForm, 'encyptAddress', encryptStr(result.houseAssetList[0].city+result.houseAssetList[0].houseAddress) )
      this.$set(this.cusForm, 'unEncyptAddress', result.houseAssetList[0].city+result.houseAssetList[0].houseAddress )
      
      if (result.houseAssetList.length > 1) {
        this.isShowcusForm = true;
        this.cusForm2 = result.houseAssetList[1] || {};
        this.$set(this.cusForm2, 'pct', result.houseAssetList[1].city+result.houseAssetList[1].town)
        this.$set(this.cusForm2, 'encyptAddress', encryptStr(result.houseAssetList[1].city+result.houseAssetList[1].houseAddress) )
        this.$set(this.cusForm2, 'unEncyptAddress', result.houseAssetList[1].city+result.houseAssetList[1].houseAddress )
      } else {
        this.isShowcusForm = false;
      }
    }
  },
  computed: {
    ...mapState({
      approvalData: state => state.approval.approvalData,
      dicts: state => state.common.dicts
    })
  }
};
</script>
